<template>
    <div id="background">
        <el-container>
            <el-header style="height:250px">
                <changeHeader  id="qiYeDetailHead">
                    <div id="qiYeDetailHeadHeight">
                        <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                            <el-col :xs="2" :sm="2" :md="2" :offset="1"  class="imgCol">
                                <img v-bind:src="backIcon" class="backSize" @click="back"/>
                            </el-col>
                            <el-col  :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                                <span class="titleSize" >{{gongSi.shortname}}</span>
                            </el-col>
                            <el-col :xs="2" :sm="2" :md="2" :offset="4"  class="imgCol">
                            <i class="el-icon-star-off" style="color:#ffffff;font-size:20px"></i>
                            </el-col>
                            <el-col :xs="2" :sm="2" :md="2" :offset="1"  class="imgCol">
                            <i class="el-icon-share" style="color:#ffffff;font-size:20px"></i>
                            </el-col>
                        </el-row>
                    </div>
                </changeHeader>
                <van-swipe style="height:200px">
                    <van-swipe-item v-for="pic in pictures" :key="pic" >
                        <img v-bind:src="pic" style="width:100%"  />
                    </van-swipe-item>
                </van-swipe>
                 <div style="padding:10px;backgroundColor:#ffffff;height:25px" >
                    <el-row >
                        <el-col :xs="10" :sm="12" :md="12" :offset="6" class="imgCol">
                              <van-rate v-model="rate" allow-half readonly></van-rate>
                        </el-col>
                        <el-col :xs="4" :sm="4" :md="4" :offset="0" >
                              <span style="color:#ffd21e">{{rate}}分</span>
                        </el-col>
                    </el-row>
                </div>
                <div style="height:5px;backgroundColor:#f5f4f9"></div>
            </el-header>
            <el-main style="backgroundColor:#ffffff">
                <van-tabs v-model="activeTab" animated color="#53cdf5" @change="changeTab">
                    <van-tab title="在招岗位" name="在招岗位">
                        <div v-show="!gangWeiPageInfo.total" style="margin-top:20px">
                            <span class="words imgCol">此公司暂无在招岗位</span>
                        </div>
                        <div v-show="gangWeiPageInfo.total">
                            <div v-for="gangWei in gangWeis" v-bind:key="gangWei.id">
                                <div style="height:5px;backgroundColor:#f5f4f9"></div>
                                    <div style="padding:10px 10px 6px 10px;backgroundColor:#ffffff">
                                        <div>
                                            <el-container>
                                                <el-aside width="90px">
                                                    <el-image
                                                        style="width: 80px; height: 80px"
                                                        :src="gangWei.picture"
                                                        fit="cover"
                                                    />
                                                </el-aside>
                                                <el-main>
                                                    <div >
                                                        <span class="words">{{gangWei.positionName}}</span>
                                                    </div>
                                                    <div class="zhaoPinTags" style="margin-top:8px;">
                                                        <van-tag v-show="gangWei.socialSecurityNotice" color="#53cdf5" plain>{{gangWei.socialSecurityNotice}}</van-tag>
                                                        <van-tag color="#f2826a" v-show="gangWei.maxAgeRequest" plain>最大年龄{{gangWei.maxAgeRequest}}岁</van-tag>
                                                        <!-- <van-tag color="#7232dd" plain>女性</van-tag> -->
                                                    
                                                    </div>
                                                    <el-row style="margin-top:8px;">
                                                        <el-col :xs="14" :sm="14" :md="14" >
                                                            <span class="moneyCss">{{gangWei.minSalary}}元/月</span>
                                                        </el-col>
                                                        <el-col :xs="10" :sm="10" :md="10" >
                                                            <span class="words" >{{gangWei.city}}{{gangWei.area}}</span>
                                                        </el-col>
                                                    </el-row>
                                                </el-main>
                                            </el-container>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="用户评论" name="用户评论">
                        <div v-show="!pinLunPageInfo.total" style="margin-top:20px">
                            <span class="words imgCol">暂无评论</span>
                        </div>
                        <div v-show="pinLunPageInfo.total" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
                            <div  v-for="pinLun in pinLuns" v-bind:key="pinLun.id">
                                    <div style="height:5px;backgroundColor:#f5f4f9"></div>
                                    <div style="padding:10px 10px 6px 10px;backgroundColor:#ffffff">
                                        <div>
                                            <el-container>
                                                <el-aside width="50px" class="imgCol">
                                                    <el-avatar size="small" :src="pinLun.head"></el-avatar>
                                                </el-aside>
                                                <el-main>
                                                    <el-row>
                                                        <span style="color:#53cdf5">{{pinLun.username}}</span>
                                                    </el-row>
                                                    <el-row>
                                                        <el-col>
                                                            <span style="font-size:8px" class="words">{{pinLun.datetime}}</span>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row>
                                                        <span class="words">{{pinLun.text}}</span>
                                                    </el-row>
                                                </el-main>
                                            </el-container>
                                        </div>
                                    </div>
                            </div>
                            <div style="height:5px;backgroundColor:#f5f4f9"></div>
                            <div v-if="loading" class="imgCol">
                                <span class="words" style="font-size:14px">加载中...</span>
                            </div>
                            <div v-if="noMore" class="imgCol">
                                <span class="words" style="font-size:14px">没有更多了...</span>
                            </div>
                            <div style="height:60px"></div>
                        </div>
                    </van-tab>
                    <van-tab title="公司简介" name="公司简介">
                        <div >
                            <el-row style="padding:10px">
                                <span class='words' style="font-size:14px">{{gongSi.introduction}}</span>
                            </el-row>
                          <div>
                            <el-input  class="qiYeDetailInput" readonly :value="gongSi.industry">
                              <span slot="prepend">所属行业</span>
                            </el-input>
                            <el-input  class="qiYeDetailInput" readonly :value="gongSi.scale">
                              <span slot="prepend">企业规模</span>
                            </el-input>
                            <el-input  class="qiYeDetailInput" readonly :value="gongSi.date">
                              <span slot="prepend">成立时间</span>
                            </el-input>
                            <el-input  class="qiYeDetailInput" readonly :value="gongSi.location">
                              <span slot="prepend">联系地址</span>
                            </el-input>
                            <el-input  class="qiYeDetailInput" readonly :value="gongSi.contact">
                              <span slot="prepend">联系方式</span>
                            </el-input>
                          </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import changeHeader from '../common/changeHeader/changeHeader.vue'
import { Swipe, SwipeItem ,Toast} from 'vant'
export default {
    components:{
        changeHeader,
    },
    data(){
        return{
            //绑定加载状态是否显示
            loading: false,
            //绑定在招岗位的页码信息
            gangWeiPageInfo:{
                pageNo:1,
                pageSize:5,
                total:0
            },
            //绑定岗位信息
            gangWeis:[],
            //绑定公司id
            companyId:'',
            //绑定tab选中的内容
            activeTab:'',
            //绑定评分
            rate:0,
            backIcon:backIcon,
            pictures:[],
            gongSi:{},
            //绑定评论的页码信息
            pinLunPageInfo:{
                pageNo:1,
                pageSize:6,
                total:0
            },
            //绑定评论信息
            pinLuns:[]
        }
    },
     computed: {
      noMore () {
        return this.pinLuns.length>=this.pinLunPageInfo.total;
      },
      disabled () {
        return this.loading || this.noMore;
      }
    },
    mounted(){
        var id=this.$route.query.companyId;
        this.companyId=id;
        this.getGongSiInfo(id);
        var params={
                companyId:id,
                pageNo:1,
                pageSize:this.pinLunPageInfo.pageSize
        }
        this.getZaiZhaoGangWei(params);
         this.getCompanyInfo(this.companyId);

        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("qiYeDetailHead");
        var headH=document.getElementById("qiYeDetailHeadHeight");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";
        headH.style.height=headHeight+"px";
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //切换tab栏
        changeTab(name){
            console.log(name);
            if(name=='在招岗位'){
                var params={
                    companyId:this.companyId,
                    pageNo:1,
                    pageSize:5
                }
                this.getZaiZhaoGangWei(params);
            }else if(this.activeTab=='用户评论'){
                 var params={
                    companyId:this.companyId,
                    pageNo:1,
                    pageSize:5
                }
                this.getUserCommit(params);
            }
        },
         //获取公司轮播图片和评分
        getGongSiInfo(id){
            var URL=this.IP.IP+'/company/pictureAndStars';
            console.log(URL);
            console.log(id);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    companyId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.pictures=response.data.data.pictures;
                   this.rate=response.data.data.stars;
                    console.log(this.rate);
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取公司简介
        getCompanyInfo(id){
            var URL=this.IP.IP+'/company/info';
            console.log(URL);
            console.log(id);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    companyId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.gongSi=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取公司在招岗位
        getZaiZhaoGangWei(params){
            var URL=this.IP.IP+'/company/posts';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:params
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                  this.gangWeis=response.data.data.info;
                  this.gangWeiPageInfo.total=response.data.data.total;
                }else{
                    // Toast(response.data.msg);
                    this.gangWeiPageInfo.total=0;
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取用户评论
        getUserCommit(params){
            var URL=this.IP.IP+'/company/commentsOfCompany';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:params
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.pinLuns=response.data.data.info;
                    this. pinLunPageInfo.total=response.data.data.total;
                }else{
                    // Toast(response.data.msg);
                    this. pinLunPageInfo.total=0;
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        load () {
            this.loading = true
            setTimeout(() => {
                this.pinLunPageInfo.pageNo++;
                var params={
                        companyId:this.companyId,
                        pageNo:this.pinLunPageInfo.pageNo,
                        pageSize:this.pinLunPageInfo.pageSize
                }
                this.getUserCommit();
                this.loading = false;

            }, 2000)
        },

    }
}
</script>
<style>
  .qiYeDetailInput .el-input__inner {
    border-style: none;
    border-bottom: 1px solid #f5f4f9;
    border-radius: 0px;
  }
  .qiYeDetailInput .el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #f5f4f9;

  }
  .qiYeDetailInput .el-input-group__append, .el-input-group__prepend {
    border-style: none;
    background-color:#fff;
    border-bottom: 1px solid #f5f4f9;
  }
.jianJieBox{
    border-bottom: 2px solid #53cdf5;
    padding: 5px;
}
.point{
 width: 10px !important;      
 height: 10px !important;      
 background-color:#53cdf5 !important;      
 border-radius: 50% !important;      
 -moz-border-radius: 50% !important;      
 -webkit-border-radius: 50% !important; 
  box-shadow: none;
}
.van-swipe__indicator--active {
    background-color: #fff;

}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.el-main {
    padding: 0px ;
}
.el-header{
  padding:0px;
}
.el-footer {
    padding:0px;
}
#qiYeDetailHead{
    position:fixed;
    top:0;
    width: 100%;
    z-index: 100;
}
.words{
    color:#707070;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
